<template>
    <div>
     <div id='footer' class="gradient-border">
      <!-- <span id="star-five" class="scroll"></span> -->
      <span class="content">青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪</span>
      </div> </div>
</template>
<script>
export default {
  name: 'MyFooter'
}
</script>
<style scoped>
*{
  margin: 0;padding: 0;
}
#footer{
        width:100vw;
        height: 51px;
        text-align: center;
        font-size: 16px;
        bottom: 0;
        /* padding: 0px 100px; */
        position: absolute;
    }
 #footer{
      cursor: pointer;
    }
    .gradient-border {
  --borderWidth: 0px;
  position: relative;
  border-radius: var(--borderWidth);
}
.gradient-border:after {
  content: '';
  position: absolute;
  top: calc(-1 * var(--borderWidth));
  left: calc(-1 * var(--borderWidth));
  height: calc(100% + var(--borderWidth) * 2);
  width: calc(100% + var(--borderWidth) * 2);
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  border-radius: calc(2 * var(--borderWidth));
  z-index: -1;
  animation: animatedgradient 3s ease alternate infinite;
  background-size: 300% 300%;
}
@keyframes animatedgradient {0% {
background-position: 0% 50%;}
50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}
}
.content{
  line-height: 50px;
  color: white;
  font-size: 17px;
}
</style>
